<!-- 订单信息 -->
<template>
	<view class="container">
		<view class="content">
			<text class="title">订单信息</text>
			<view class="info">
				<view class="info-item">
					<text class="label">订单编号：</text>
					<view class="value">
						<text>29057105506</text>
						<view class="split"></view>
						<button class="btn btn-transition-scale9" @click="handleCopy('29057105506')">复制</button>
					</view>
				</view>
				<view class="info-item">
					<text class="label">下单时间：</text>
					<text class="value">2024-12-21 00:00:00</text>
				</view>
				<view class="info-item">
					<text class="label">支付方式：</text>
					<text class="value">微信支付</text>
				</view>
				<view class="info-item">
					<text class="label">支付状态：</text>
					<text class="value">已支付</text>
				</view>
				<view class="info-item">
					<text class="label">取货方式：</text>
					<text class="value">自提</text>
				</view>
				<view class="info-item">
					<text class="label">订单金额：</text>
					<text class="value">￥56.34</text>
				</view>
				<view class="info-item">
					<text class="label">实付金额：</text>
					<text class="value">￥48.34</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const handleCopy = (data) => {
		uni.setClipboardData({
			data
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 24rpx 25rpx 0;
	}

	.content {
		background-color: white;
		border-radius: 20rpx;
		padding: 22rpx 24rpx 24rpx 26rpx;

		.title {
			font-weight: bold;
			font-size: 30rpx;
			color: #222222;
			line-height: 1.5;
		}

		.info {
			margin-top: 22rpx;

			&-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				color: #222222;
				line-height: 60rpx;

				.value {
					display: flex;
					align-items: center;

					.split {
						width: 1rpx;
						height: 22rpx;
						background-color: #979797;
						margin: 0 22rpx;
					}

					.btn {
						background-color: transparent;
					}
				}
			}
		}
	}
</style>